import { h } from 'snabbdom';

function renderTitleBlack(elemNode, children, editor) {
    const attributes = elemNode.allAttributes || {};
    // 如果是 table 元素，调用 wangEditor 的表格渲染逻辑
    if (elemNode.type === 'table') {
        const newChildren = elemNode.children.map((child, i) => {
            const childCopy = { ...children[i] }; // 创建可扩展的副本
            childCopy.attributes = childCopy.attributes || {};
            return childCopy;
        });
        return renderTable(elemNode, newChildren, editor, children);
    }

    // 如果是 table-row 元素，渲染为 tr
    if (elemNode.type === 'table-row') {
        return renderTableRow(elemNode, elemNode.children, editor, children);
    }

    // 如果是 table-cell 或 table-header-cell 元素，渲染为 td 或 th
    if (elemNode.type === 'table-cell') {
        return renderTableCell(elemNode, children, editor);
    }

    // // 默认渲染逻辑
    const vnode = h(
        elemNode.myTagName || 'div', // 使用 myTagName 作为标签名，默认为 div
        {
            attrs: attributes,
        },
        elemNode.children
    );
    
    return vnode;
}

// 渲染 table 元素
function renderTable(elemNode, children, editor, vChildren) {
    const attributes = elemNode.allAttributes ? { ...elemNode.allAttributes } : {}; // 创建副本
    if (attributes.style) {
        attributes.style += ' margin-bottom: 30px;';
    } else {
        attributes.style = ' margin-bottom: 30px;';
    }
    // 渲染所有的行
    const rows = children.map(row => {
        return renderTitleBlack(row, row.children || [], editor);
    });

    return h('table', { attrs: attributes }, vChildren);
}

// 渲染 table-row 元素
function renderTableRow(elemNode, children, editor, vChildren) {
    const attributes = elemNode.allAttributes || {};

    // 渲染所有的单元格
    const cells = children.map(cell => {
        return renderTitleBlack(cell, cell.children || [], editor);
    });

    return h('tr', { attrs: attributes }, vChildren);
}
function renderTableCell(elemNode, children, editor) {
    // 创建可扩展的属性副本
    const attributes = elemNode.allAttributes ? {...elemNode.allAttributes} : {};
    const processedChildren = children.map(child => {
        if (child.type === 'img') {
            // 创建新的可扩展图片属性对象
            const imgAttrs = {
                ...(child.allAttributes ? {...child.allAttributes} : {}),
                style: `max-width:100%;height:auto;${child.allAttributes?.style || ''}`
            };
            return h('img', { attrs: imgAttrs });
        }
        
        // 处理文本节点
        if (child.text) {
            return child.text;
        }
        // 递归处理嵌套元素
        if (child.children) {
            return renderTitleBlack(child, child.children, editor);
        }
        return '';
    });

    const tagName = elemNode.isHeader ? 'th' : 'td';
    return h(tagName, { 
        attrs: {
            ...attributes,
            style: `${attributes.style || ''};padding:8px;border:1px solid #ddd;`
        }
    }, processedChildren);
}

export const renderTableElemConf = {
    type: 'table', // 指定需要渲染的类型为 table
    renderElem: renderTitleBlack,
};